<!-- 登录页 -->
<template>
  <view class="login screen-width">
    <!-- <navBar :title="`快捷登录`" /> -->
    <view class="main">
      <view class="top_bg"></view>
      <view class="main_content">
        <!-- <view class="tap_title">
          <span
            v-for="(item, index) in tapList"
            :key="index"
            @tap="hanldTab(index)"
            :class="currentIndex == index ? 'active' : ''"
          >{{ item }}</span>
        </view> -->
        <view class="tap_mian_content">
          <!-- <view class="from_content" v-show="currentIndex == 0">
            <view class="from_item">
              <input type="number" placeholder="请输入手机号码" v-model="userPhoneInfo.phoneNumber" />
            </view>
            <view class="from_item">
              <input type="text" placeholder="请输入短信验证码" v-model="userPhoneInfo.code" maxlength="6" />
              <text @tap="getVerifyCode" v-show="isShow">{{ msg }}</text>
              <text v-show="!isShow">{{ timeId }}后重发</text>
            </view>
            <view class="from_btn" @tap="shortcutLogin">登录 / 注册</view>
          </view>
          <view class="from_Password" v-show="currentIndex == 1">
            <view class="from_item">
              <input type="number" v-model="userPhoneInfo.phoneNumber" placeholder="请输入手机号码" />
            </view>
            <view class="from_item">
              <input type="password" v-model="userPhoneInfo.password" placeholder="请输入密码" />
            </view>
            <view class="from_option">
              <navigator url="/pages/register/index" redirect clas="text">免费注册</navigator>
              <navigator url="/pages/forget/index" redirect hover-class="className">忘记密码</navigator>
            </view>
            <span class="btn" @tap="shortcutLogin">立即登录</span>
          </view> -->
		  <view class="from_Password">
		    <view class="from_item">
		      <input type="number" v-model="userPhoneInfo.phoneNumber" placeholder="请输入手机号码" />
		    </view>
		    <view class="from_item">
		      <input type="password" v-model="userPhoneInfo.password" placeholder="请输入密码" />
		    </view>
		    <view class="from_option">
		      <navigator url="/pages/register/index" redirect clas="text">免费注册</navigator>
		      <navigator url="/pages/forget/index" redirect hover-class="className">忘记密码</navigator>
		    </view>
		    <span class="btn" @tap="shortcutLogin">立即登录</span>
		  </view>
          <view class="thirdParty" v-show="isWeixin()">
            <text>第三方登录</text>
          </view>
          <view class="scan_code" v-show="isWeixin()">
            <image src="../../static/login/WeChat.png" mode="heightFix" />
            <button @tap="getUserInfo">一键登录</button>
          </view>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import navBar from "../../components/topBar.vue";
import { pageUrl, appId } from "@/util/api.js";
import { isMobile } from "../../util/validator.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    navBar
  },
  data() {
    //这里存放数据
    return {
      tapList: ["快捷登录", "密码登录"],
      currentIndex: 1, // 当前的索引值
      timeId: 60, // 倒计时数
      isShow: true,
      msg: "获取验证码",
      // 用户快捷登录
      userPhoneInfo: {
        phoneNumber: "", // 手机号码
        code: "", // 验证码
        password: "" // 密码
      }
    };
  },
  //监听属性 类似于data概念
  computed: {
    "userPhoneInfo.code"() {
      if (this.userPhoneInfo.code.length > 7) {
        return this.userPhoneInfo.code.substring(0, 6);
      } else {
        return this.userPhoneInfo.code;
      }
    }
  },
  //方法集合
  methods: {
    handleWxLogin() {
      uni.webView.navigateTo({
        url: "/pages/wxlogin/index"
      });
    },
    // 判断是否为微信浏览器
    isWeixin() {
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },
    // 获取一键登录
    getUserInfo() {
      uni.webView.getEnv(res => {
        if (res.miniprogram) {
          this.handleWxLogin();
        } else {
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=` +
            appId +
            `&redirect_uri=` +
            encodeURIComponent(
              pageUrl +
                `/app/openid.html?redirectUrl=` +
                (window.location.protocol + "//" + window.location.host) +
                `/pages/login/index`
            ) +
            `&response_type=code&scope=snsapi_base`;
        }
      });
    },
    hanldTab(index) {
      this.currentIndex = index;
      this.userPhoneInfo.phoneNumber = "";
    },
    // 快捷登录
    loginRrequest(url) {
      this.$post(url, this.userPhoneInfo).then(res => {
        if (res.code == 500) {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: "none"
          });
        } else if (res.code == 200) {
          uni.showToast({
            title: "登录成功",
            duration: 2000,
            icon: "none"
          });
          //跳转页面
          uni.setStorageSync("Mtoken", res.message);
          history.back();
        }
      });
    },
    // 请求封装
    shortcutLogin() {
      if (this.currentIndex == 0) {
        delete this.userPhoneInfo.password; // 删除密码登录
        if (
          !isMobile(this.userPhoneInfo.phoneNumber) ||
          this.userPhoneInfo.code == ""
        ) {
          uni.showToast({
            title: "请输入正确手机号码或验证码",
            duration: 2000,
            icon: "none"
          });
          return;
        }
        let url = "/bmj-api/api/codeLogin"; // 验证码接口登录
        this.loginRrequest(url);
      } else {
        delete this.userPhoneInfo.code;
        if (
          !isMobile(this.userPhoneInfo.phoneNumber) ||
          this.userPhoneInfo.password == ""
        ) {
          uni.showToast({
            title: "请输入正确手机号码或密码",
            duration: 2000,
            icon: "none"
          });
          return;
        }
        let url = "/bmj-api/api/login";
        this.loginRrequest(url);
      }
    },
    // 获取验证码
    getVerifyCode() {
      if (!isMobile(this.userPhoneInfo.phoneNumber)) {
        uni.showToast({
          title: "请确认你的手机号码是否正确",
          duration: 2000,
          icon: "none"
        });
        return;
      }

      let data = {
        phoneNumber: this.userPhoneInfo.phoneNumber,
        type: "Login"
      };
      this.$get("/bmj-api/api/ums/umsUsers/sendVerificationCode", data).then(
        res => {
          //   console.log(res);
          if (res.code == 200) {
            this.isShow = false;
            uni.showToast({
              title: "验证码已发送您手机,请查收",
              duration: 2000,
              icon: "none"
            });
            let times = setInterval(() => {
              this.timeId--;
              if (this.timeId == 0) {
                clearInterval(times);
                this.timeId = 60;
                this.isShow = true;
              }
            }, 1000);
          }
        }
      );
    }
  },
  onShow() {
    if (uni.getStorageSync("Mtoken")) {
      uni.showToast({
        title: "登录成功",
        duration: 2000,
        icon: "none"
      });
      uni.switchTab({
        // 跳转到首页
        url: "/pages/index/index"
      });
    }
  },

  mounted() {
    // #ifndef  MP-WEIXIN
    if (window.location.search != "") {
      // 位置栏获取信息 code
      let url = window.location.search;
      let openId = url.split("&")[0].replace("?openId=", "");
      if (openId) {
        uni.setStorageSync("openId", openId);
        this.$post("/bmj-api/api/byOpenIdLogin", { openId }).then(res => {
          // console.log(111111111111, res);
          if (res.code == 10009) {
            uni.showToast({
              title: "您还没有注册,立即注册",
              duration: 2000,
              icon: "none"
            });
            uni.navigateTo({
              url: "/pages/register/index"
            });
          } else if (res.code == 10010) {
            uni.showToast({
              title: "您还没有绑定手机,立即绑定",
              duration: 2000,
              icon: "none"
            });
            uni.navigateTo({
              url: "/pages/bindPhoneNumber/index"
            });
          } else if (res.code == 200) {
            uni.setStorageSync("Mtoken", res.message); // 存入用户
            uni.removeStorageSync("openId");

            let url = uni.getStorageSync("pageUrl");

            if (url) {
              let reg = url.match(/https?:\/\/([^/]+)/i)[0];
              let page = url.replace(reg, "");
              if (page == "/pages/mime/index") {
                uni.switchTab({
                  // 跳转到首页
                  url: "/pages/mime/index"
                });
              } else {
                uni.redirectTo({ url: `${page}` });
              }
              uni.removeStorageSync("pageUrl");
              // console.log(1111, reg, page);
            } else {
              uni.switchTab({
                // 跳转到首页
                url: "/pages/index/index"
              });
              // history.back()
            }
          } else {
            uni.showToast({
              title: "系统错误",
              duration: 2000,
              icon: "none"
            });
          }
        });
      } else {
        console.log(err);
      }
    }
    // #endif
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.main {
  //   padding: 0 30rpx;
  background-color: #fff;
  .top_bg {
    background-image: url(../../static/login/login_bg.png);
    height: 260rpx;
    background-size: 100% 100%;
  }
  .main_content {
    min-height: calc(100vh - 350rpx);
    padding: 0 30rpx;
    .tap_title {
      display: flex;
      align-items: center;
      height: 100rpx;
      border-bottom: 1px solid #f1f1f1;

      span {
        display: flex;
        color: #aaaaaa;
        font-size: 28rpx;
        display: flex;
        padding: 25rpx 44rpx;
        &.active {
          position: relative;
          font-size: 32rpx;
          color: #333333;
          font-size: 700;
          &::before {
            position: absolute;
            left: 50%;
            right: 50%;
            bottom: -5px;
            transform: translate(-50%, -50%);
            content: "";
            width: 32rpx;
            height: 6rpx;
            background-color: #61a3ff;
            border-radius: 20rpx;
          }
        }
      }
    }
    .tap_mian_content {
      margin-top: 60rpx;
      .from_content {
        .from_item {
          display: flex;
          align-items: center;
          height: 120rpx;
          display: flex;
          border-bottom: 1px solid #ccc;
          input {
            font-size: 32rpx;
            flex: 1;
          }
          text {
            color: #5ca1ff;
            padding: 14rpx 16rpx;
            background-color: #e8f3ff;
            font-weight: 700;
          }
        }
        .from_btn {
          margin-top: 80rpx;
          background: #1678ff;
          color: #fff;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .from_Password {
        .from_item {
          display: flex;
          height: 120rpx;
          align-items: center;
          border-bottom: 1px solid #ccc;
          input {
            font-size: 32rpx;
            flex: 1;
          }
        }
        .from_option {
          display: flex;
          align-items: center;
          height: 120rpx;
          justify-content: space-between;
          text {
            color: #1678ff;
          }
        }
        .btn {
          color: #fff;
          height: 88rpx;
          background-color: #1678ff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .thirdParty {
        margin-top: 140rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        position: relative;
        text {
          position: relative;
          color: #aaaaaa;
          font-size: 28rpx;
          background-color: #fff;
          padding: 24rpx 54rpx;
          z-index: 1;
        }
        &::before {
          position: absolute;
          left: 0;
          top: 50%;
          content: "";
          width: 100%;
          height: 1px;
          z-index: 0;
          border-top: 1px solid #ebebeb;
        }
      }
      .scan_code {
        padding: 40px auto 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 198rpx;
        position: relative;
        image {
          width: 72rpx;
          height: 72rpx;
        }
        button {
          position: absolute;
          opacity: 0;
        }
      }
    }
  }
}
</style>
